<template>
  <div class="main-content">
    <div style="display: flex; grid-gap: 10px">

      <div style="flex: 1">
        <div class="card" style="padding: 30px; margin-bottom: 10px">
          <div style="font-weight: bold; font-size: 24px; margin-bottom: 20px">{{ blog.title }}</div>
          <div style="color: #666; margin-bottom: 20px">
            <span style="margin-right: 20px"><i class="el-icon-user"></i> {{ blog.userName }}</span>
            <span style="margin-right: 20px"><i class="el-icon-date"></i> {{ blog.date }}</span>
            <span style="margin-right: 20px"><i class="el-icon-eye"></i> {{ blog.readCount }}</span>
            <span>
              <el-tag v-for="item in tagsArr" :key="item" type="primary" style="margin-right:5px">{{ item }}</el-tag>
            </span>
          </div>

          <div class="w-e-text">
            <div v-html="blog.content"></div>
          </div>

        </div>



        <div class="card">
          <div class="card">
            <h2 style="margin-bottom: 20px">评论 {{ commentCount }}</h2>

            <div style="margin-bottom: 20px">
              <el-input type="textarea" placeholder="请输入评论内容" v-model="commentContent"></el-input>
              <div style="text-align: right; margin-top: 5px">
                <el-button type="primary" @click="addComment">评 论</el-button>
              </div>
            </div>

            <div>
              <div style="display: flex; grid-gap: 20px; margin-bottom: 20px" v-for="item in commentList" :key="item.id">
                <img :src="item.avatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
                <div style="flex: 1">
                  <!--                这是第一级评论-->
                  <div style="margin-bottom: 10px">
                    <div style="color: #666; margin-bottom: 10px">{{ item.userName }}</div>
                    <div style="color: #444; margin-bottom: 10px">{{ item.content }}</div>
                    <div style="color: #888; font-size: 13px"><span style="margin-right: 20px">{{ item.time }}</span>
                      <span style="cursor: pointer"><i class="el-icon-s-comment"></i>评论</span>
                    </div>
                  </div>
                  <!--                这是回复-->
                  <div style="display: flex;  grid-gap: 20px; margin-bottom: 20px" v-for="sub in item.children" :key="item.id">
                    <img :src="sub.avatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
                    <div style="flex: 1">
                      <div style="color: #666; margin-bottom: 10px">{{ sub.userName }} <span style="color: #333" v-if="sub.replyUser !== item.userName">回复  {{ sub.replyUser }}</span></div>
                      <div style="color: #444; margin-bottom: 10px">{{ sub.content }}</div>
                      <div style="color: #888; font-size: 13px"><span style="margin-right: 20px">{{ sub.time }}</span>
                        <span style="cursor: pointer"><i class="el-icon-s-comment"></i>评论</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="width: 260px">
        <div class="card" style="margin-bottom: 10px">
          <div style="display: flex; align-items: center; grid-gap: 10px; margin-bottom: 10px">
            <img :src="blog.user?.avatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
            <div style="flex: 1;">
              <div style="font-weight: bold; margin-bottom: 5px">{{ blog.user?.name }}</div>
              <div style="color: #666; font-size: 13px" class="line2">{{ blog.user?.info }}</div>
            </div>
          </div>

          <div style="display: flex">
            <div style="flex: 1; text-align: center">
              <div style="margin-bottom: 5px">文章</div>
              <div style="color: #888">10</div>
            </div>
            <div style="flex: 1; text-align: center">
              <div style="margin-bottom: 5px">点赞</div>
              <div style="color: #888">10</div>
            </div>
            <div style="flex: 1; text-align: center">
              <div style="margin-bottom: 5px">收藏</div>
              <div style="color: #888">10</div>
            </div>
          </div>
        </div>

        <div class="card" style="margin-bottom: 10px">
          <div style="font-weight: bold; font-size: 20px; padding-bottom: 10px; border-bottom: 1px solid #ddd; margin-bottom: 10px">相关推荐</div>

          <div>
            <div style="margin-bottom: 15px" v-for="item in recommendList" :key="item.id">
              <div style="margin-bottom: 5px">你的代码不堪一击，太烂了</div>
              <div style="color: #888">
                <span>阅读</span> <span>204</span>
                <span style="margin-left: 10px">点赞</span> <span>10</span>
              </div>
            </div>
          </div>
        </div>

        <div class="card">
          <div style="display: flex; grid-gap: 10px; ">
            <div style="flex: 1; line-height: 25px">
              找对属于你的学习圈子
              扫码学习精品项目
            </div>

          </div>
        </div>

      </div>



    </div>


  </div>
</template>

<script>

export default {
  name: "BlogDetail",
  components: {

  },
  data() {
    return {
      blogId: this.$route.query.blogId,
      blog: {},
      tagsArr: [],
      recommendList: [],
      commentCount: 0,
      commentContent: '',
      commentList: []
    }
  },
  created() {
    this.load()

    this.loadComment()
  },
  methods: {
    loadComment() {
      this.$request.get('/comment/selectForUser', {
        params: {  fid: this.blogId, module: '博客' }
      }).then(res => {
        this.commentList = res.data || []
      })
    },
    addComment() {
      this.$request.post('/comment/add', { content: this.commentContent, fid: this.blogId, module: '博客' }).then(res => {
        if (res.code === '200') {
          this.$message.success('操作成功')
          this.commentContent = ''
          this.loadComment()  // 重新加载数据
        }
      })
    },
    setLikes() {
      this.$request.post('/likes/set', {  fid: this.blogId, module: '博客' }).then(res => {
        if (res.code === '200') {
          this.$message.success('操作成功')

          this.load()  // 重新加载数据
        }
      })
    },
    setCollect() {
      this.$request.post('/collect/set', {  fid: this.blogId, module: '博客' }).then(res => {
        if (res.code === '200') {
          this.$message.success('操作成功')

          this.load()  // 重新加载数据
        }
      })
    },
    load() {
      this.$request.get('/blog/selectById/' + this.blogId).then(res => {
        this.blog = res.data || {}

        this.tagsArr = JSON.parse(this.blog.tags || '[]')
      })

      // this.$request.get('/blog/selectRecommend/' + this.blogId).then(res => {
      //   this.recommendList = res.data || []
      // })
    }
  }
}
</script>

<style>
/* blockquote 样式 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 20px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
pre code {
  display: block;
}
p {
  line-height: 30px
}

.active {
  color: orange !important;
}
.recommend-title {
  margin-bottom: 5px;
}
.recommend-title:hover {
  color: #2a60c9;
}
</style>